import React, { Component } from 'react';
// 从组件库导入组件
import { TabBar } from 'antd-mobile';
// 导入icon图标
import { AppOutline,BillOutline,UnorderedListOutline,ShopbagOutline,UserOutline  } from 'antd-mobile-icons';
// 导入css样式
import '../../styles/Rests/tabbar.css'
// 导入高阶组件
import { withRouter } from 'react-router-dom'
class Tabbar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tabs: [
                {
                    key: '/index/homejsx',
                    title: '店铺',
                    icon: <AppOutline />,
                  },
                {
                    key: '/index/myclass',
                    title: '分类',
                    icon: <BillOutline />,
                  },
                {
                    key: '/index/allshop',
                    title: '全部商品',
                    icon: <UnorderedListOutline />,
                  },
                {
                    key: '/index/shopcar',
                    title: '购物车',
                    icon: <ShopbagOutline />,
                  },
                {
                    key: '/index/user',
                    title: '个人中心',
                    icon: <UserOutline />,
                  },
            ],
            activeKey: '/index/homejsx',
        }
    }
    changeTabbar(key) {
        // console.log(key);
        this.props.history.push({pathname:key,state:{id:282657}});
        this.setState({activeKey: key})
    }
    render() {
        return (
            <div className='tabbar'>
                <TabBar activeKey={this.state.activeKey} onChange={(key)=>{this.changeTabbar(key)}}>
                    {
                    this.state.tabs.map(item => (
                        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                    )
                    )}
                </TabBar>
            </div>
        );
    }
}
// withRouter 是 react-router-dom 实现的一个高阶组件，专门用来给没有location，history，match这三个路由对象的组件 添加这三个路由的
export default withRouter(Tabbar);